<template>
  <view class="component-container">
    <view class="nav">
      <view
        class="nav-item"
        v-for="(label, index) in viewList?.list"
        :key="index"
        @click="change(index)"
        :class="{ 'active-nav': index === viewList!.current }"
        >{{ label }}</view
      >
      <span style="color: rgb(255 255 255 / 32.2%)">|</span>
      <view class="nav-item active-nav" @click="toPlanning"
        ><uni-icons custom-prefix="iconfont" type="icon-luxian" size="16" color="#fff"></uni-icons> 路径</view
      >
    </view>
    <view class="slider-box">
      <view class="slider">
        <view class="visual-slider"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import StyleSizeOperation from '@/utils/StyleSizeOperation'
interface ViewList {
  list: string[]
  current: number
}
const props = defineProps({
  viewList: {
    type: Object as () => ViewList,
    require: true
  }
})

// 改变当前导航项
function change(newCurrent: number) {
  props.viewList!.current = newCurrent
}
// ---style-vars---
// 计算滑块宽度
const sliderBoxWidth = computed(() => {
  if (props.viewList?.list == null) return '0'
  return StyleSizeOperation.summation(
    StyleSizeOperation.multiply('750rpx', props.viewList!.list.length / (props.viewList!.list.length + 1)),
    '-12rpx'
  )
})
const sliderWidth = computed(() => StyleSizeOperation.division(sliderBoxWidth.value, props.viewList?.list.length ?? 0))
const visualSliderWidth = computed(() => StyleSizeOperation.multiply(sliderWidth.value, 0.5))
const sliderLeftOffset = computed(() => StyleSizeOperation.multiply(sliderWidth.value, props.viewList?.current ?? 0))
// 路径规划
function toPlanning() {
  uni.navigateTo({ url: '/pages/planning/index' })
}
</script>

<style scoped lang="scss">
.slider-box {
  width: v-bind(sliderBoxWidth);
  height: 6rpx;

  .slider {
    display: flex;
    justify-content: center;
    margin-left: v-bind(sliderLeftOffset);
    width: v-bind(sliderWidth);
    height: 100%;
    transition: all 0.3s;

    .visual-slider {
      width: v-bind(visualSliderWidth);
      height: 100%;
      background-color: #fff;
    }
  }
}

.nav {
  $nav-height: 100rpx;

  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #1a1a1a;

  .nav-item {
    height: $nav-height;
    font-size: 30rpx;
    font-weight: 600;
    text-align: center;
    color: #bfbcbc;
    flex-grow: 1;
    line-height: $nav-height;
  }

  .active-nav {
    color: #fff;
  }
}
</style>
